import React from "react";
import "./App.css";
class App extends React.PureComponent {
  state = {
    date: "",
    name: "",
    state: "",
    arr: [
      { date: "2023-05-27", name: "订单0", state: "0" },
      { date: "2023-05-16", name: "订单1", state: "0" },
      { date: "2023-05-30", name: "订单2", state: "1" },
      { date: "2023-05-07", name: "订单3", state: "0" },
      { date: "2023-05-18", name: "订单4", state: "1" },
      { date: "2023-05-19", name: "订单5", state: "1" },
      { date: "2023-05-23", name: "订单6", state: "1" },
      { date: "2023-05-22", name: "订单7", state: "0" },
      { date: "2023-05-21", name: "订单8", state: "2" },
      { date: "2023-05-20", name: "订单9", state: "1" },
    ],
  };
  delete(item) {
    console.log("删除");
    const _arr = [...this.state.arr];
    console.log(_arr.indexOf(item), "indexOf");
    _arr.splice(_arr.indexOf(item), 1);
    this.setState({ arr: _arr });
  }
  update(item) {}
  search = () => {
    console.log("搜索");
    console.log(this.state, "this.state");
    let _arr = [...this.state.arr];
    if (this.state.date) {
      _arr = _arr.filter((item) => item.date === this.state.date);
    }
    if (this.state.name) {
      _arr = _arr.filter((item) => item.name === this.state.name);
    }
    if (this.state.state) {
      console.log("12");
      _arr = _arr.filter((item) => item.state === this.state.state);
    }
    console.log(_arr, "_arr");
    this.setState({
      arr: _arr,
    });
  };
  getArr = () => {
    return this.state.arr.map((item) => {
      const map = {
        0: "已逾期",
        1: "已完成",
        2: "进行中",
      };
      return (
        <tr>
          <th scope="row">{item.date}</th>
          <td>{item.name}</td>
          <td>{map[item.state]}</td>
          <td>
            <button onClick={this.delete.bind(this, item)}>删除</button>
            <button onClick={this.update.bind(this, item)}>修改</button>
          </td>
        </tr>
      );
    });
  };
  render() {
    return (
      <div className="App">
        日期：
        <input
          value={this.state.date}
          onInput={(e) => this.setState({ date: e.target.value })}
        ></input>
        订单号:
        <input
          value={this.state.name}
          onInput={(e) => this.setState({ name: e.target.value })}
        ></input>
        状态:
        <select
          value={this.state.state}
          onChange={(e) => this.setState({ state: e.target.value })}
        >
          <option value>请选择</option>
          <option value="0">已逾期</option>
          <option value="1">已完成</option>
          <option value="2">完成中</option>
        </select>
        <button onClick={this.search}>查询</button>
        <table>
          <thead>
            <tr>
              <th scope="col">日期</th>
              <th scope="col">订单号</th>
              <th scope="col">状态</th>
              <th scope="col">操作</th>
            </tr>
          </thead>
          <tbody>{this.getArr()}</tbody>
        </table>
      </div>
    );
  }
}

export default App;
